<template>
  <!-- 头部 -->
  <nav class="top_title_box">
    <span class="firstboxsp">海鲜市场</span>
    <span class="twoboxsp">推荐</span>
    <span class="threeboxsp">上海</span>
    <div class="rightbox_div">
      <span class="qiandaobox"><van-icon name="refund-o" /> 签到</span>
    </div>
  </nav>
  <!-- 搜索框和banner图 -->
  <div class="search_box padding16">
    <input class="mid_box" placeholder="请输入搜索内容" />
    <span class="leibie">分类</span>
  </div>
  <!-- <img :src="oneimg" alt="" /> -->
  <!-- 中间主体 -->
  <main class="padding16">
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item class="swiperboxitem">
        <div class="swpbdiv" v-for="item in bigCardItem">
          <div v-for="item1 in item.bigCardList" @click="goNewPath(item1)">
            <span class="topsp"><img :src="item1.imgSrc" alt="" /></span>
            <span class="twosp">{{ item1.imgName }}</span>
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <img class="swiperimg" src="@/assets/images/5.png" alt="" srcset="" />
      </van-swipe-item>
    </van-swipe>
  </main>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter() //路由跳转等方法
const route = useRoute() //用来获取路由传值等参数
const oneimg = ref('src/assets/images/1.png') //img的src需要这么写，不然绑定了不生效
const bigCardItem = reactive([
  {
    bigCardList: [
      {
        imgSrc: 'src/assets/images/1.png',
        imgName: '计算器',
        id: '1'
      },
      {
        imgSrc: 'src/assets/images/2.png',
        imgName: '卡片2',
        id: '2'
      },
      {
        imgSrc: 'src/assets/images/3.png',
        imgName: '卡片3',
        id: '3'
      },
      {
        imgSrc: 'src/assets/images/4.png',
        imgName: '卡片4',
        id: '4'
      }
    ]
  },
  {
    bigCardList: [
      {
        imgSrc: 'src/assets/images/1.png',
        imgName: '卡片1',
        id: '5'
      },
      {
        imgSrc: 'src/assets/images/2.png',
        imgName: '卡片2',
        id: '6'
      },
      {
        imgSrc: 'src/assets/images/3.png',
        imgName: '卡片3',
        id: '7'
      },
      {
        imgSrc: 'src/assets/images/4.png',
        imgName: '卡片4',
        id: '8'
      }
    ]
  }
])
const goNewPath = (item1: any) => {
  // 中间8个tab跳转链接
  if (item1.id == '1') {
    // 计算器功能
    router.push({ path: '/calculator1', query: { pagetitle: '父-路由传递的数据' } })
  } else if (item1.id == '2') {
    //传值方式学习
    router.push({ path: '/propsemitStudy', query: { pagetitle: '父-路由传递的数据' } })
  }
}
</script>
<style scoped>
.top_title_box {
  height: 55px;
  /* background-color: pink; */
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 16px;
}

.top_title_box span {
  font-weight: 700;
}

.firstboxsp {
  font-style: italic;
  width: 80px;
}

.twoboxsp {
  width: 40px;
}

.threeboxsp {
  font-size: 19px;
  width: 60px;
}

.rightbox_div {
  flex: 1;
  text-align: right;
}

.qiandaobox {
  width: 65px;
  display: inline-block;
  background: #e2c01594;
  border-radius: 10px;
  position: relative;
  color: #cb8608;
}

.qiandaobox .van-icon {
  font-size: 24px;
  position: absolute;
  top: 1px;
  left: 0;
}

.search_box {
  display: flex;
  align-items: center;
  margin: 0 0 10px 0;
}

.mid_box {
  height: 42px;
  border-radius: 20px;
  border: 2px solid;
  width: 88%;
  padding: 0 0 0 15px;
}

.leibie {
  width: 50px;
  flex: 1;
  text-align: right;
  display: inline-block;
  height: 42px;
  line-height: 42px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 160px;
  text-align: center;
  /* background-color: #39a9ed; */
}

.swiperboxitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 160px;

  .swpbdiv {
    width: 85%;
    height: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;

    div {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      justify-content: space-around;

      .topsp {
        height: 40px;

        img {
          width: 40px;
          height: 32px;
        }
      }

      .twosp {
        height: 30px;
        color: black;
        font-size: 17px;
      }
    }
  }
}

.swiperimg {
  background-size: cover;
  width: 100%;
  height: 100%;
}
</style>
